<template>
  <el-dialog
    v-model="drawerVisible"
    :destroy-on-close="true"
    title="查看问题"
    width="74%"
    draggable
    align-center
    custom-class="user-info-dialog"
  >
    <div class="info-container">
      <el-form
        ref="ruleFormRef"
        label-width="100px"
        label-suffix=" :"
        :model="drawerProps.row"
        disabled
        :hide-required-asterisk="drawerProps.isView"
        label-position="top"
        class="info-form"
      >
        <el-form-item label="分类" prop="typeId">
          <el-cascader
            v-model="drawerProps.row!.typeId"
            :options="options"
            placeholder="请选择分类"
            clearable
            :props="defaultOptions"
            ref="cascaderRef"
          />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="drawerProps.row!.title" placeholder="请填写标题" clearable></el-input>
        </el-form-item>

        <el-form-item label="浏览次数" prop="viewNumber">
          <el-input v-model="drawerProps.row!.viewNumber" placeholder="请填写浏览次数" clearable></el-input>
        </el-form-item>
        <el-form-item label="悬赏" prop="reward">
          <el-input v-model="drawerProps.row!.reward" placeholder="请填写悬赏" clearable></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input class="at-h" type="textarea" v-model="drawerProps.row!.content" placeholder="请填写内容" clearable></el-input>
        </el-form-item>
        <el-form-item label="问题图片" prop="fileList">
          <!-- <el-image
              style="width: 100px; height: 100px; margin-right: 10px"
              :src="item.url"
              :key="key"
              v-for="(item, key) in drawerProps.row!.fileList"
            /> -->
          <UploadImgs v-model:file-list="drawerProps.row!.fileList" height="140px" width="140px"> </UploadImgs>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, getCurrentInstance, onMounted } from "vue";
import { FormInstance } from "element-plus";
import { User, File, Dict } from "@/api/interface";
import { getDict } from "@/api/modules/sys";
import UploadImgs from "@/components/Upload/Imgs.vue";
const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;

// 分类查询
let options = ref();
let defaultOptions = ref();

// 加载字典数据
const loadNode = async (node: Node, resolve: (data: Dict.ResDictList[]) => void) => {
  if (node.value) {
    const { data } = await drawerProps?.value.getDict({ parentId: node.value });
    resolve(data);
  }
};

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<User.ResUserList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  getDict: (params: any) => Promise<any>;
  fileList: File.ResFileList[];
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {
    fileList: []
  }
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  // 保存
  defaultOptions.value = {
    lazy: true,
    label: "name",
    value: "id",
    checkStrictly: true,
    lazyLoad: loadNode
  };
};
onMounted(async () => {
  const { data } = await getDict!({ parentId: dict.questionId });
  options.value = data;
});
defineExpose({
  acceptParams
});
</script>
<style lang="scss">
:deep(.user-info-dialog) {
  display: flex;
  height: 600px;
}
.info-container {
  height: 580px;
}
.info-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 30px;
  .el-select,
  .el-cascader,
  .el-date-editor {
    width: 100%;
  }
}
</style>
